<template>
	<view class="page-bg">
		<view style="height: 44upx;background-color: #FFFFFF;"></view>
		<!-- 自定义导航栏 -->
		<view class="d-flex a-center j-sb px-4" style="height: 88upx;background-color: #FFFFFF;">
			<text class="iconfont icon-fanhui" @click="skipToLastPage"></text>
			<view class="d-flex label-wrapper">
				<view @click="switchModel(index)" class="label-item" :class="[defaultModel == index?'active':'']" v-for="(item,index) in moduleConfig"
				 :key="index">
					<text>{{item.name}}</text>
				</view>
			</view>
			<text class="iconfont icon-zhuanfa"></text>
		</view>
		<swiper @change="swiperChange" :current="defaultModel" :style="'height:' + scrollH + 'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
					<view>
						<view class="tip-wrap d-flex a-center j-center">
							<text>您关注的楼盘共{{buildList.length}}个</text>
						</view>
						<view class="" style="background-color: #fff;">
							<view v-for="(item,index) in buildList" :key="index" @tap="checkEstateDetail(item.id)"  style="height: 196upx;margin:0 30upx; padding: 30upx 0;" class="d-flex flex-column j-sb  border-bottom">
								<view class="d-flex j-sb">
									<view style="margin-right: 34upx;">
										<image :src="item.thumb" style="width: 242upx;height: 190upx;" mode=""></image>
									</view>
									<view class="d-flex flex-column" style="width: 428upx;">
										<text style="font-size: 32upx;font-weight: 600;line-height: 44upx;">{{item.projectName}}</text>
										<text style="color: #F85D5A;font-size: 28upx;">{{item.housePrice}}元/㎡</text>
										<text class="single-row-over">大兴 黄村火车站/建面73-129㎡</text>
										<view class="d-flex a-center">
											<uni-tag text="在售" style="margin-right: 2upx;" size="small" type="success"></uni-tag>
											<uni-tag v-for="(item1,index1) in item.tags" style="margin-right: 2upx;" :key="index1" :text="item1"
											 size="small"></uni-tag>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
					<view>
						<view class="tip-wrap d-flex a-center j-center">
							<text>您关注的户型共{{huxList.length}}个</text>
						</view>
						<view v-for="(item,index) in huxList" :key="index" @click="skipToHuxingPage(item)" style="background-color: #FFFFFF;" class="d-flex flex-column ">
							<view class="d-flex flex-column border-bottom" style="height: 90upx;padding: 20upx 40upx 6upx;">
								<view class="d-flex a-center j-sb font-32" style="font-weight: bold;line-height: 40upx;">
									<text>{{item.projectName}}</text>
									<text>{{item.housePrice}}元/平</text>
								</view>
								<view>
									<text class="font-24" style="color: #999999;">{{item.houseAddress}}</text>
								</view>
							</view>
							<view class="d-flex a-center border-bottom apart-item px-4" style="height: 240upx;">
								<view style="margin-right: 40upx;">
									<image :src="item.image" style="width: 202upx;height: 190upx;"></image>
								</view>
								<view class="d-flex flex-column" style="font-size: 28upx;">
									<view class="d-flex a-center">
										<text style="margin-right: 10upx;font-size: 32upx;font-weight: bold;">{{item.habitableRoom}}</text>
										<uni-tag type="success" :text="item.salesState" size="small"></uni-tag>
									</view>
									<view>
										<text>建面{{item.buildingArea}}</text>
									</view>
									<view class="d-flex">
										<uni-tag text="户型方正" size="small" style="margin-right: 4upx;"></uni-tag>
										<uni-tag text="餐课一体" size="small"></uni-tag>
									</view>
									<view>
										<text style="color: #F85D5A;">约259万/套</text>
									</view>
								</view>
							</view>
						    <view class="block-area"></view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				buildList: [],
				huxList: [],
				scrollH: 500,
				defaultModel: 0,
				moduleConfig: [{
						id: 0,
						name: "楼盘"
					},
					{
						id: 1,
						name: "户型"
					}
				]
			}
		},
		watch:{
			defaultModel(newVal){
				if(newVal == 0){
					this.initConcernList()
				}
				if(newVal == 1){
					this.initConcernHuxList()
				}
			}
		},
		components: {
			uniTag
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(160);
				}
			});
			this.initConcernList()
		},
		methods: {
			switchModel(idx) {
				this.defaultModel = idx;
			},
			swiperChange(event){
				let currentIdx = event.detail.current;
				this.defaultModel = currentIdx;
			},
			skipToLastPage(){
				uni.navigateBack({
				    delta: 1
				});
			},
			skipToHuxingPage(item){
				uni.navigateTo({
					url:"/pages/estate/huxingDetail/huxingDetail?contentId=" + item.contentId + "&houseTypeId=" + item.houseTypeId
				})
			},
			//获取楼盘收藏列表
			initConcernList() {
				let _this = this;
				let token = this.token = uni.getStorageSync('token');
				api.request({
						url: '/lpxx/collect/building-list',
						data: {
							token: token
						}
					})
					.then(response => {
						console.log(response)
						this.buildList = response.length > 0 ? response : [];
					})
					.catch(err => {
						console.log(err);
					});
			},
			//获取户型收藏列表
			initConcernHuxList() {
				let _this = this;
				let token = this.token = uni.getStorageSync('token');
				api.request({
						url: '/lpxx/collect/house-type-list',
						data: {
							token: token
						}
					})
					.then(response => {
						console.log(response)
						this.huxList = response.length > 0 ? response : [];
					})
					.catch(err => {
						console.log(err);
					});
			},
            checkEstateDetail(id) {
                if (id) {
                    uni.navigateTo({
                        url: '/pages/estate/estateDetail/estateDetail?contentId=' + id
                    })
                }
            }
		}
	}
</script>

<style scoped>
	.page-bg{
		height: 100%;
		background-color: #F8F8F8;
	}
	.tip-wrap {
		height: 68upx;
		background: #F8F8F8;
		font-size: 24upx;
		color: #999999;
	}

	.label-wrapper {
		align-items: center;
		justify-content: space-around;
		font-size: 32upx;
		height: 84upx;
		text-align: center;
		font-weight: bold;
		width: 320upx;
	}

	.label-item {
		display: flex;
		align-items: center;
		height: 100%;
		border-bottom: 2px solid #FFFFFF;
	}

	.label-item.active {
		height: 40px;
		border-color: #005BAD !important;
		display: flex;
		align-items: center;
		color: #005BAD;
	}
	.block-area{
		width: 100%;
		height: 20upx;
		background-color: #F8F8F8;
	}
</style>
